<template>
  <div class="excel-upload-box">
    <el-dialog
      title="xls/xlsx"
      :visible.sync="excelUploadBoxVisible"
      width="30%"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <el-upload
        class="upload-demo"
        drag
        ref="upload"
        :auto-upload="false"
        :action="baseUrl+ '/upload'"
        name="file"
        :with-credentials="true"
        :before-upload="beforeUpload"
        :on-change="onChange"
        :on-success="successUpload"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" slot="tip">只能上传xls/xlsx文件</div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setUploadBoxVisible(false)">取 消</el-button>
        <!-- <el-button type="primary" @click="xlsBoxVisible = false">确 定</el-button> -->
      </span>
    </el-dialog>
    <load-sheet
      :loadSheetBoxVisible="loadSheetBoxVisible"
      :data="data"
      v-on:set-load-sheet-box-visible="setLoadSheetBoxVisible"
    ></load-sheet>
  </div>
</template>

<script>
import LoadSheet from "@/components/common/LoadSheet.vue";
export default {
  props: ["excelUploadBoxVisible"],
  components: {
    LoadSheet,
  },
  data() {
    return {
      loadSheetBoxVisible: false,
      data: null,
      uploadData: { md5: null },
    };
  },
  methods: {
    checkSuffix(name, type) {
      let index = name.lastIndexOf(".");

      let suffix = name.substr(index + 1);

      return type.indexOf(suffix) != -1;
    },
    setLoadSheetBoxVisible(val) {
      this.loadSheetBoxVisible = val;
    },
    setUploadBoxVisible(val) {
      this.$emit("set-excel-upload-box-visible", val);
    },
    setActiveSheet(sheet) {
      let json = this.data.sheetJson[sheet];
      this.table = this.data.sheetTable[sheet];

      if (json == "{}") {
        this.table = "<h2>暂无任何数据</h2>";
      }

      this.activeSheet = sheet;
    },
    onChange(file) {
      let that = this;
      if(this.uploadData.md5)
        return

      let res = this.checkSuffix(file.name, "xls/xlsx");

      if (!res) {
        this.$message.error("文件格式错误！");
        return
      }
        that.$refs.upload.submit()

      //将文件的MD5值赋值给uploadData
      // const fr = new FileReader();
      // fr.readAsArrayBuffer(file.raw);
      // fr.onload = function () {
      //   let md5 = that.$md5(this.result);
      //   that.uploadData.md5 = md5;

      // };
      
      console.log(that.uploadData.md5);

    },
    beforeUpload(file) {
      let res = this.checkSuffix(file.name, "xls/xlsx");

      if (!res) {
        this.$message.error("文件格式错误！");
      }

      return res;
    },
    successUpload(res) {
      //如果上传成功后
      if (res.code == 200) {
        this.setUploadBoxVisible(false);
        this.data = res.data;
        this.loadSheetBoxVisible = true;
      }
    },

    load() {
      if (this.sheets.length == 0) {
        this.$message.error("请选择要加载的表！");
        return;
      }

      let data = {
        sheetNames: this.sheets,
      };

      this.$axios.post("/load", data).then((res) => {
        if (res.code == 200) {
          this.loadSheetBoxVisible = false;
          this.$store.commit("addLoadSheetList", res.data);
        }
      });
    },
  },
};
</script>

<style>
.load-sheet-box .table > table th {
  padding: 0 20px 0 20px;
}
</style>

<style scoped>
.active {
  background-color: rgb(244, 244, 244);
}

.load-sheet-box {
  display: flex;
  justify-content: space-around;
}

.load-sheet-box > .sheet-list {
  width: 20%;
}

.load-sheet-box > .table {
  width: 80%;
  border-left: 1px solid rgb(234, 234, 234);
  padding-left: 15px;
  text-align: center;

  overflow: scroll;
  user-select: none;
}

.sheet-list {
  list-style-type: none;
  user-select: none;
}

.sheet-list li {
  padding: 8px;
}

.sheet-list li:hover {
  background-color: rgb(244, 244, 244);
}
</style>